<template>
	<div class="floor">
		<div class="py-container">
			<div class="title clearfix">
				<h3 class="fl">{{ list.name }}</h3>
				<div class="fr">
					<ul class="nav-tabs clearfix">
						<li class="active" v-for="(value, index) in list.navList" :key="index">
							<a :href="value.url" data-toggle="tab">{{ value.text }}</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="tab-content">
				<div class="tab-pane">
					<div class="floor-1">
						<div class="blockgary">
							<ul class="jd-list">
								<li v-for="(value, index) in list.keywords" :key="index">{{ value }}</li>
							</ul>
							<img :src="list.imgUrl" />
						</div>
						<div class="floorBanner">
							<el-carousel indicator-position="none" height="360px">
								<el-carousel-item v-for="value in list.carouselList" :key="value.id">
									<img :src="value.imgUrl" alt="" />
								</el-carousel-item>
							</el-carousel>
						</div>
						<div class="split">
							<span class="floor-x-line"></span>
							<div class="floor-conver-pit" v-for="value in list.recommendList1" :key="value.id">
								<img :src="value.imgUrl" />
							</div>
						</div>
						<div class="split center">
							<img :src="list.bigImg" />
						</div>
						<div class="split">
							<span class="floor-x-line"></span>
							<div class="floor-conver-pit" v-for="value in list.recommendList2" :key="value.id">
								<img :src="value.imgUrl" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'FloorPush',
	props: ['list'],
};
</script>

<style scoped>
.floor {
	margin-top: 15px;
}
.floor .py-container {
	width: 1200px;
	margin: 0 auto;
}
.floor .py-container .title .fl {
	float: left;
	color: #c81623;
	font-size: 20px;
	line-height: 30px;
	margin: 9px 0;
	font-weight: 700;
}
.floor .py-container .title .fr {
	float: right;
}
.floor .py-container .title .fr .nav-tabs {
	margin: 10px 0 0;
	display: inline-block;
}
.floor .py-container .title .fr .nav-tabs li {
	float: left;
	line-height: 18px;
}
.floor .py-container .title .fr .nav-tabs li a {
	padding-top: 1px;
	font-weight: 400;
	background-color: #fff;
}
.floor .py-container .title .fr .nav-tabs li a::after {
	content: '|';
	padding: 0 10px;
}
.floor .py-container .title .fr .nav-tabs li:nth-child(7) a::after {
	content: '';
}
.floor .py-container .title .fr .nav-tabs li.active a {
	color: #e1251b;
}
.floor .py-container .tab-content {
	border-top: 2px solid #c81623;
	border-bottom: 1px solid #e4e4e4;
}
.floor .py-container .tab-content .tab-pane .floor-1 {
	height: 360px;
	display: flex;
}
.floor .py-container .tab-content .tab-pane .floor-1 .blockgary {
	width: 210px;
	height: 100%;
	background: #f7f7f7;
}
.floor .py-container .tab-content .tab-pane .floor-1 .blockgary .jd-list {
	padding: 15px 0;
	overflow: hidden;
}
.floor .py-container .tab-content .tab-pane .floor-1 .blockgary .jd-list li {
	list-style-type: none;
	float: left;
	width: 40%;
	margin: 0 10px;
	border-bottom: 1px solid #e4e4e4;
	text-align: center;
	line-height: 26px;
}
.floor .py-container .tab-content .tab-pane .floor-1 .blockgary img {
	width: 209px;
	height: 250px;
}
.floor .py-container .tab-content .tab-pane .floor-1 .floorBanner {
	width: 330px;
	height: 100%;
}
.floorBanner img {
	width: 329px;
	height: 360px;
}
.floor .py-container .tab-content .tab-pane .floor-1 .split {
	position: relative;
	width: 220px;
	height: 100%;
	border-left: 1px solid #e4e4e4;
}
.floor .py-container .tab-content .tab-pane .floor-1 .split .floor-x-line {
	position: absolute;
	background: #e4e4e4;
	width: 220px;
	height: 1px;
	top: 180px;
}
.floor .py-container .tab-content .tab-pane .floor-1 .split .floor-conver-pit {
	width: 100%;
	height: 50%;
}
.floor .py-container .tab-content .tab-pane .floor-1 .split .floor-conver-pit img {
	width: 100%;
	height: 100%;
	transition: all 0.2s linear;
}
.floor .py-container .tab-content .tab-pane .floor-1 .split .floor-conver-pit img:hover {
	overflow: hidden;
	padding-left: 3px;
}
.floor .py-container .tab-content .tab-pane .floor-1 .center {
	border-bottom: 1px solid #e4e4e4;
}
.center img {
	width: 222px;
	height: 360px;
}
</style>
